<template>
  <!--业务查询-公共查询-组件 -->
  <section class="component apply">
    <el-form label-width="90px" class="text-left tableInput" ref="apply-circulation" :model="model">
        <data-box :data="badDebtsData" style="padding-left: 0px;" @onPageChange="refreshData" :page="pageServiceData" v-if="rowData.applyCategory==='VERIFY_DESTORY'" hiddenIndex>
          <template slot="columns">
            <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="personalName" label="客户名称" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="personalNo" label="客户编号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="overdueAmount" label="坏账金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
          </template>
        </data-box>
        <el-form-item label="申请批次号" v-if="rowData.applyCategory==='VERIFY_DESTORY'">
            <el-input v-model="rowData.verifyBatchNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="展期天数" v-if="rowData.applyCategory==='LOAN_EXTENSION'">
            <el-input v-model="rowData.extensionDays" disabled></el-input>
        </el-form-item>
        <el-form-item label="减免详情" v-if="rowData.applyCategory==='DERATE_CASE'">
          <data-box :data="dreateCaseData" style="padding-left: 0px;">
            <template slot="columns">
              <el-table-column prop="waivers" label="减免项" :formatter="(row) => $filter.encryptWaivers(row.waivers)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="actualAmount" label="实际金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="derateAmounts" label="减免金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
              </el-table-column>
            </template>
          </data-box>
        </el-form-item>
        <el-form-item label="申请原因" prop="applyDescription">
            <el-input type="textarea" v-model="rowData.applyDescription" :rows="3" :maxlength="500" disabled></el-input>
        </el-form-item>
        <!-- 查看附件 -->
       <el-form-item label="查看附件">
        <el-button  @click="openViewAttachList()">查看附件</el-button>
      </el-form-item>
        <el-form-item label="历史审批意见">
          <data-box :data="recordHistory" style="padding-left: 0px;" @onPageChange="refreshDataHistory" :page="pageServiceHistory">
            <template slot="columns">
            <!--数据列区域-->
                <el-table-column prop="applyCategory" label="审批名称" :formatter="(row) => $filter.dictConvert(row.applyCategory,'ApplyCategory')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip></el-table-column>
                <el-table-column prop="processPhase" label="流程阶段" :formatter="(row) => $filter.dictConvert(row.processPhase,'ProcessPhase')" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="roleName" label="操作角色" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="approvalRealName" label="操作人员" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="applyTime" label="申请时间" :formatter="(row) => $filter.dateTimeFormat(row.applyTime)" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="approvalTime" label="审批时间" :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="approvalOpinion" label="意见" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
                </el-table-column>               
                <el-table-column prop="applyStatus" label="审核状态" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" show-overflow-tooltip>
                </el-table-column>               
            </template>
          </data-box>
      </el-form-item>
      <p style="color:red;text-align:center;font-size:16px" v-if="rowData.applyCategory==='VERIFY_DESTORY'">{{'如需下载核销借据明细,请前往【报表管理--核销案件明细】'}}</p>
    </el-form>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { namespace } from 'vuex-class';
import { CaseApplyRecordService } from '~/services/domain-service/case-apply-record.service';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { VisitCaseManageService } from '~/services/domain-service/visit-case-manage.service';
import { FlowTaskService } from '~/services/domain-service/flow-task.service';
import { PageService } from "~/utils/page.service";
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { CASE_CHANNEL, ApplyType } from "~/config/enum.config";
import { Form } from "element-ui";
import DataBox from '~/components/common/data-box.vue';


@Component({
  components: {
    DataBox
  },
})
export default class QueryCommon extends Vue {
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(VisitCaseManageService)
  private visitCaseManageService: VisitCaseManageService;
  @Dependencies(FlowTaskService)
  private flowTaskService: FlowTaskService;
  @Dependencies(PageService) private pageServiceData: PageService;
  @Dependencies(PageService) private pageServiceHistory: PageService;
  

  
  private model: any = null;

  private dialog: boolean = false;
  private submitLoading: boolean = false;
  private fileList: any[] = [];
  private checkMessages: any = {}
  private recordHistory: any[] = [];
  private badDebtsData: any[] = [];
  private verifyBatchNumber: any = '';
  @Prop({ required: true })
  private rowData: string;
  @Prop()
  private dreateCaseData;
  @Emit('openViewAttachList')
  private openViewAttachList() {
    
  }
  @Emit('close')
  private close() {
    
  }
  //转换输入的小数
  private toPositiveInteger(){
    if(!this.model.repaymentPeriods) return
    this.model.repaymentPeriods=Math.floor(this.model.repaymentPeriods)
  }

  
  

  @Watch('rowData', { immediate: true })
  private idChange(value) {
    console.log(value,"value")
    this.verifyBatchNumber = value.verifyBatchNumber
    this.refreshDataHistory()
    if(value.applyCategory==='VERIFY_DESTORY'){
      this.refreshData()
    }
  }
  private refreshData() {
    this.caseApplyRecordService
      .getCaseApplyInfo(this.verifyBatchNumber,this.pageServiceData)
      .subscribe((data) => {
        this.badDebtsData = data;
      });
  }
  private refreshDataHistory() {
    this.caseOperatorPageService
      .caseApplyHistory({ verifyBatchNumber: this.verifyBatchNumber },this.pageServiceHistory)
      .subscribe((data) => {
        this.recordHistory = data;
      });
  }
 
 
}
</script>

<style lang="less" scoped>

</style>
